{extend name="base"/}
{block name="resources"}
<style type="text/css">
	.tree-line{padding:10px 0;background:#ededed;margin-bottom:2px;line-height: 1.8;}
	.tree-line .layui-form{padding-left: 10px !important;}
	.tree-line .layui-form-checkbox{margin:0 10px !important;vertical-align:middle;}
	.ns-form {margin-top: 0;}
	.ns-item-block-hover-a {cursor: pointer;}
	.ns-input-box {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
	.layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
	.ns-item-content-desc{display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}
</style>
{/block}
{block name="main"}
<div class="layui-form ns-form">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>类型名称：</label>
		<div class="layui-input-block">
			<input type="text" name="group_name" lay-verify="required" autocomplete="off" class="layui-input ns-len-long">
		</div>
	</div>

	<div class="layui-form-item" hidden>
		<label class="layui-form-label">是否自营：</label>
		<div class="layui-input-block">
			<input type="checkbox" name="is_own" value="1" lay-skin="switch" >
		</div>
	</div>

	<div class="layui-form-item" hidden>
		<label class="layui-form-label">年费：</label>
		<div class="layui-input-block">
			<div class="layui-input-inline">
				<input type="number" name="fee" value="0.00" lay-verify="flo" autocomplete="off" class="layui-input ns-len-short">
			</div>
			<span class="layui-form-mid">元</span>
		</div>
		<div class="ns-word-aux">
			<p>年费不能小于0，可保留两位小数</p>
		</div>
	</div>

	<div class="layui-form-item layui-form-text" hidden>
		<label class="layui-form-label">描述：</label>
		<div class="layui-input-block">
			<textarea name="remark" class="layui-textarea ns-len-long"></textarea>
		</div>
	</div>

	<div class="layui-form-item layui-form-text" id="promotion_list" hidden>
        <div id="promotion">
			<span class="layui-form-label">店铺营销：</span>
			<div class="layui-input-block">
				<div class="site_list ns-item-block-parent ns-item-five">
					{foreach $promotions as $promotion}
					{if  condition="$promotion['show_type'] eq 'shop'"}
					<a class="ns-item-block ns-item-block-hover-a">
						<div class="ns-item-block-wrap">
							<div class="ns-item-pic">
								<img src="{:img($promotion['icon'])}" />
							</div>
							<div class="ns-item-con">
								<div class="ns-item-content-title">{$promotion['title']}</div>
								<p class="ns-item-content-desc">{$promotion['description']}</p>
							</div>
						</div>

						<div class="ns-input-box">
							<input type="checkbox" value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
						</div>
					</a>
					{/if}
					{/foreach}
				</div>
			</div>
        </div>
		
        <div id="admin">
			<span class="layui-form-label">平台推广：</span>
			<div class="layui-input-block">
				<div class="site_list ns-item-block-parent ns-item-five" >
					{foreach $promotions as $promotion}
					{if  condition="$promotion['show_type'] eq 'admin'"}
					<a class="ns-item-block ns-item-block-hover-a">
						<div class="ns-item-block-wrap">
							<div class="ns-item-pic">
								<img src="{:img($promotion['icon'])}" />
							</div>
							<div class="ns-item-con">
								<div class="ns-item-content-title">{$promotion['title']}</div>
								<p class="ns-item-content-desc">{$promotion['description']}</p>
							</div>
						</div>

						<div class="ns-input-box">
							<input type="checkbox" value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
						</div>
					</a>
					{/if}
					{/foreach}
				</div>
			</div>
        </div>
		
        <div id="member">
			<span class="layui-form-label">会员营销：</span>
			<div class="layui-input-block">
				<div class="site_list ns-item-block-parent ns-item-five" >
					{foreach $promotions as $promotion}
					{if  condition="$promotion['show_type'] eq 'member'"}
					<a class="ns-item-block ns-item-block-hover-a">
						<div class="ns-item-block-wrap">
							<div class="ns-item-pic">
								<img src="{:img($promotion['icon'])}" />
							</div>
							<div class="ns-item-con">
								<div class="ns-item-content-title">{$promotion['title']}</div>
								<p class="ns-item-content-desc">{$promotion['description']}</p>
							</div>
						</div>

						<div class="ns-input-box">
							<input type="checkbox" value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
						</div>
					</a>
					{/if}
					{/foreach}
				</div>
			</div>
		</div>
		
		<div id="tool">
			<span class="layui-form-label">应用工具：</span>
			<div class="layui-input-block">
				<div class="site_list ns-item-block-parent ns-item-five" >
					{foreach $promotions as $promotion}
					{if  condition="$promotion['show_type'] eq 'tool'"}
					<a class="ns-item-block ns-item-block-hover-a">
						<div class="ns-item-block-wrap">
							<div class="ns-item-pic">
								<img src="{:img($promotion['icon'])}" />
							</div>
							<div class="ns-item-con">
								<div class="ns-item-content-title">{$promotion['title']}</div>
								<p class="ns-item-content-desc">{$promotion['description']}</p>
							</div>
						</div>

						<div class="ns-input-box">
							<input type="checkbox" value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
						</div>
					</a>
					{/if}
					{/foreach}
				</div>
			</div>
		</div>
	</div>
	
	<div class="ns-form-row">
		<button class="layui-btn  ns-bg-color " lay-submit lay-filter="save">保存</button>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
</div>
{/block}
{block name="script"}
<script>
    var promotion_items = $("#promotion a").length,
        extend_items = $("#admin a").length,
        interaction_items = $("#member a").length,
    	tool_item = $("#tool").length;
    if (promotion_items == 0) {
        $("#promotion").hide();
    }
    if (extend_items == 0) {
        $("#admin").hide();
    }
    if (interaction_items == 0) {
        $("#member").hide();
    }
	if (tool_item == 0) {
		$("#tool").hide();
	}
	
	layui.use('form', function() {
		var form = layui.form,
			repeat_flag = false; //防重复
		form.render();

		$(".ns-item-block").each(function() {
			var checkCon = $(this).find(".ns-input-checkbox");
			$(this).click(function() {
				if ($(checkCon).is(':checked')) {
					$(this).find(".layui-form-checkbox").removeClass("layui-form-checked");
					$(checkCon).prop("checked", false);
				} else {
					$(this).find(".layui-form-checkbox").addClass("layui-form-checked");
					$(checkCon).prop("checked", true);
				}
			});

			form.on("checkbox(is_checked)", function(data) {
				$(data.elem).parents(".ns-item-block").click();
			})
		});

		form.on('submit(save)', function(data) {
			var obj = $("#promotion_list input:checked");
			var addon_array = [];
			for (var i = 0; i < obj.length; i++) {
				addon_array.push(obj.eq(i).val());
			}
			data.field.addon_array = addon_array.toString();
			if(repeat_flag) return;
			repeat_flag = true;

			$.ajax({
				url: ns.url("admin/shopgroup/addGroup"),
				data:data.field,
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					repeat_flag = false;

					if (res.code == 0) {
						layer.confirm('添加成功', {
							title:'操作提示',
							btn: ['返回列表', '继续添加'],
							yes: function(){
								location.href = ns.url("admin/shopgroup/lists")
							},
							btn2: function() {
								location.href = ns.url("admin/shopgroup/addGroup")
							}
						});
					}else{
						layer.msg(res.message);
					}
				}
			});
		});

		form.verify({
			flo: function (value, item) {
				if (value == '') {
					return;
				}
				if (value < 0) {
					return '年费不能小于0！';
				}
				var arrMen = value.split(".");
				var val = 0;
				if (arrMen.length == 2) {
					val = arrMen[1];
				}
				if (val.length > 2) {
					return '年费最多可保留两位小数！'
				}
			}
		});  
	});

	//跳转到店铺列表
	function back() {
		location.href = ns.url("admin/shopgroup/lists")
	}
</script>
{/block}